<template>
	<div>
		<div class="left">
			<div class="left-a" v-for="(r,i) in rankId" :key="i" v-on:click="getList(i)">
				{{r}}
			</div>
		</div>
		<div class="right">
			<tr>
				<td>歌名</td>
				<td>歌手</td>
				<td>时长</td>
			</tr>
				<tr v-for="(r,i) in privileges" :key="i" >
						<td @click="play(r.id)">{{r.name}}</td>
						<td><a v-for="s in r.ar" @click="toSinger(s.id)">{{s.name}}&nbsp;&nbsp;</a></td>
						<td>{{r.dt}}</td>
				</tr>
		</div>
	</div>
</template>

<script>
	import axios from "axios";
	export default{
		mounted(){
			  this.getList()
			},
		data(){
			return{
				rankId:{
					"0": "云音乐新歌榜",
					"1": "云音乐热歌榜",
					"2": "网易原创歌曲榜",
					"3": "云音乐飙升榜",
					"4": "云音乐电音榜",
					"5": "UK排行榜周榜",
					"6": "美国Billboard周榜",
					"7": "KTV嗨榜",
					"8": "iTunes榜",
					"9": "Hit FM Top榜",
					"10": "日本Oricon周榜",
					"11": "韩国Melon排行榜周榜",
					"12": "韩国Mnet排行榜周榜",
					"13": "韩国Melon原声周榜",
					"14": "中国TOP排行榜(港台榜)",
					"15": "中国TOP排行榜(内地榜)",
					"16": "香港电台中文歌曲龙虎榜",
					"17": "华语金曲榜",
					"18": "中国嘻哈榜",
					"19": "法国 NRJ EuroHot 30周榜",
					"20": "台湾Hito排行榜",
					"21": "Beatport全球电子舞曲榜",
					"22": "云音乐ACG音乐榜",
					"23": "云音乐嘻哈榜"
				},
				privileges:[]
			}
		},
		methods:{
			getList(rankId=0){
				//形参=xx  表示默认值
				var that=this
				console.log(rankId)
				axios.get("http://netease.bluej.cn/top/list?timestamp=555",{
					params:{
						idx:rankId
					}
				}).then(function(res){
					console.log(res);
					that.privileges = res.data.playlist.tracks;
				})
			},
			toSinger(singerId){
				//跳转到singer页面
				//1.psth跳转，带参数使用的是query
//				this.$router.push( { path:"/singer",query:{singerid : singerId} } );
				
				//2.name跳转
//				this.$router.push({name:"geshou",params:{singerid : singerId}});

				//name 命名路由方式跳转到动态路由时，会出现无法重定向的问题  所以还是要使用路径的形式
				this.$router.push("/singer/"+singerId);
				
				//推荐 path跳转（不需要动态路由） 或者拼接动态路由额参数到path（动态路由的情况下）
			},
			play(songid){
				//点击歌曲的方法
				//给vuex传递数据从而更改状态
				this.$store.commit("change",songid);
				
				//this.$parent ===App.vue
				//this.$parent.$refs.player === player
				//触发player组件的getSong
				this.$parent.$refs.player.getSong();
			}
		}
	}
</script>

<style scoped lang="scss">
	.left{
		float: left;
		text-align: left;
	}
	.left-a{
		background: #42B983;
		color: white;
		border-radius: 50px;
		padding: 5px 10px;
		margin-top: 5px;
	}
</style>